
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <span>冷链车辆实时监控</span>
          </template>
          <div ref="mapContainer" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
            <div style="text-align: center; color: #666;">
              <i class="fas fa-truck" style="font-size: 48px; margin-bottom: 10px;"></i>
              <p>冷链车辆实时位置监控</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>车辆状态</span>
          </template>
          <el-table :data="vehicles" style="width: 100%">
            <el-table-column prop="id" label="车辆" />
            <el-table-column prop="driver" label="司机" />
            <el-table-column prop="temperature" label="温度(℃)" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="row.status === '正常' ? 'success' : 'danger'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>温度趋势图</span>
      </template>
      <div ref="temperatureChart" style="height: 300px;"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'

const vehicles = ref([])
let temperatureChartInstance = null

const loadVehicles = async () => {
  const response = await axios.get('/api/cold-chain/vehicles')
  vehicles.value = response.data
}

const initTemperatureChart = () => {
  const chartDom = document.querySelector('[ref="temperatureChart"]')
  temperatureChartInstance = echarts.init(chartDom)
  
  const option = {
    title: {
      text: '车辆温度变化趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['CV-001', 'CV-002']
    },
    xAxis: {
      type: 'time',
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      name: '温度(℃)',
      min: -5,
      max: 10
    },
    series: [
      {
        name: 'CV-001',
        type: 'line',
        data: generateTemperatureData(),
        smooth: true,
        itemStyle: { color: '#409EFF' }
      },
      {
        name: 'CV-002',
        type: 'line',
        data: generateTemperatureData(),
        smooth: true,
        itemStyle: { color: '#67C23A' }
      }
    ]
  }
  
  temperatureChartInstance.setOption(option)
}

const generateTemperatureData = () => {
  const data = []
  const now = new Date()
  for (let i = 0; i < 24; i++) {
    data.push([
      new Date(now.getTime() - (23 - i) * 3600000),
      Math.random() * 2 + 1.5
    ])
  }
  return data
}

onMounted(() => {
  loadVehicles()
  initTemperatureChart()
})

onUnmounted(() => {
  if (temperatureChartInstance) {
    temperatureChartInstance.dispose()
  }
})
</script>
